<template>
	<view class="e-p-20" :style="[AppSkinVar]">
		<view class="e-p-20 border-b-ed bg-white">
			<view class="e-flex">
				<load-image mode="aspectFill" :size="['80rpx']" radius="10rpx" :src="goods?.commodityUrl"></load-image>
				
				<view class="e-flex-1 e-m-l-10 overflow-hidd">
					<view class="c-29 e-font-32 e-m-b-6 e-line-1">
						<text >{{ goods?.commodityName }}</text>
					</view>
					<text class="c-secondary">{{ goods?.commoditySpecName }}</text>
				</view>
			</view>
			<view class="e-flex e-m-t-40">
				<text class="fw-600 e-font-32 c-45">{{ $t('classify.描述相符') }}</text>
				<view class="e-m-l-40 e-flex">
					<image
						:src="`/pages/order/static/star${form.descScore > index ? '_act' : ''}.png`"
						class="img-50"
						@tap="form.descScore = index + 1"
						v-for="(item, index) in 5"
						:key="index"
					></image>
				</view>
			</view>
		</view>
		<view class="e-p-30 bg-white e-m-b-20">
			<textarea v-model="form.content" :placeholder="$t('order.请输入评价')" />
			<upload ref="uploadRef" :uploadIcon="$staticPath('user/upload.png')"></upload>
			<view class="border-b-ed"></view>
			<view class="e-p-t-30 e-flex e-flex-items-start e-flex-between">
				<view class="e-flex">
					<radio class="e-m-r-16" :color="AppSkin.primary" :checked="form.hasAnonym === 1" @tap="form.hasAnonym = form.hasAnonym === 1 ? 0 : 1" />
					<text class="e-font-30" style="white-space: nowrap">{{ $t('order.匿名') }}</text>
				</view>
				<text class="c-secondary e-font-24 e-p-l-20">{{ $t('order.匿名提示') }}</text>
			</view>
		</view>
		<view class="e-p-30 e-font-32 c-45 e-m-b-40 bg-white e-radius-20">
			<view class="e-m-b-40">
				{{ goods?.storeName }}
			</view>
			<view class="e-flex e-m-b-22">
				<text class="fw-600 e-font-32 c-45">{{ $t('classify.物流服务') }}</text>
				<view class="e-m-l-40 e-flex">
					<image
						:src="`/pages/order/static/star${form.deliveryScore > index ? '_act' : ''}.png`"
						class="img-50"
						@tap="form.deliveryScore = index + 1"
						v-for="(item, index) in 5"
						:key="index"
					></image>
				</view>
			</view>
			<view class="e-flex e-p-b-14">
				<text class="fw-600 e-font-32 c-45">{{ $t('classify.服务态度') }}</text>
				<view class="e-m-l-40 e-flex">
					<image
						:src="`/pages/order/static/star${form.serviceScore > index ? '_act' : ''}.png`"
						class="img-50"
						@tap="form.serviceScore = index + 1"
						v-for="(item, index) in 5"
						:key="index"
					></image>
				</view>
			</view>
		</view>
		<button class="bg-primary c-white" @tap="submit">{{ $t('order.提交') }}</button>
		<view style="height: 160rpx"></view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { postOrderEvaluate, getRefundGoodsDetail } from '@/common/request/api';
import { useCurrentInstance, usePromise } from '@/common/hooks';
import { useI18n } from 'vue-i18n';
import { onLoad } from '@dcloudio/uni-app';
import { throttle } from '@/common/utils';
import type { UploadInstance } from '@/typings/components';

const props = defineProps({
	id: String,
	goodsId: String
});

const ctx = useCurrentInstance();
const { t } = useI18n();
const form = ref({
	descScore: 5,
	serviceScore: 5,
	deliveryScore: 5,
	content: '',
	hasAnonym: 0
});
const [getGoods, goods] = usePromise(async () => {
	const res = await getRefundGoodsDetail(props.goodsId!);
	return res.data;
});

const uploadRef = ref<UploadInstance>();
const submit = throttle(function () {
	postOrderEvaluate({
		...form.value,
		orderDeputyId: props.id!,
		photos: uploadRef.value?.imgList?.map?.((item) => item.url).join(',') || undefined
	}).then(() => {
		ctx.$toastAndBack(t('order.评价成功'));
	});
}, 1000);

onLoad(() => {
	getGoods();
});
</script>

<style lang="scss" scoped>
.c-29 {
	color: #292d33;
}
.c-45 {
	color: #454545;
}
.border-b-ed {
	border-bottom: 2rpx solid #ededed;
}
.goods-info {
	// width: 100vw;
	padding: 20rpx 30rpx 40rpx 30rpx;
	.goods-text-box {
		width: calc(100% - 130rpx);
	}
}
button {
	width: 100%;
	height: 100rpx;
	border-radius: 50rpx;
}
</style>
